<template>
<uni-shadow-root class="custom-tab-bar-index"><view class="tab-bar">
  <view class="tab-bar-border"></view>
  <view v-for="(item,index) in (list)" :key="item.index" v-if="item.key !== 'customer' || !is_customer" class="tab-bar-item" :data-path="item.pagePath" :data-index="index" @click="switchTab">
    <image :src="selected === item.key ? item.selectedIconPath : item.iconPath"></image>
    <view :style="'color: '+(selected === item.key ? selectedColor : color)">{{item.text}}</view>
  </view>
</view></uni-shadow-root>
</template>

<script>

global['__wxRoute'] = 'custom-tab-bar/index'
const app = getApp();

Component({
	data: {
		selected: 'index',
		color: "#bfbfbf",
		selectedColor: "#3F7CFB",
		is_customer: false,
		list: [{
			pagePath: "/pages/index/index",
			iconPath: "/static/tabbar/index.png",
			selectedIconPath: "/static/tabbar/index-actived.png",
			text: "首页",
			key: 'index',
		}, {
			pagePath: "/pages/customer/customer",
			iconPath: "/static/tabbar/customer.png",
			selectedIconPath: "/static/tabbar/customer-actived.png",
			text: "客户",
			key: 'customer',
		}, {
			pagePath: "/pages/mine/mine",
			iconPath: "/static/tabbar/mine.png",
			selectedIconPath: "/static/tabbar/mine-actived.png",
			text: "我的",
			key: 'mine',
		}]
	},
	methods: {
		switchTab(e) {
			const data = e.currentTarget.dataset
			const url = data.path
			wx.switchTab({
				url
			})
		},
	}
})
export default global['__wxComponents']['custom-tab-bar/index']
</script>
<style platform="mp-weixin">
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: white;
  display: flex;
  flex-direction: row;
  padding-bottom: env(safe-area-inset-bottom);
  pointer-events: auto;
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item image {
  width: 27px;
  height: 27px;
}

.tab-bar-item view {
  font-size: 10px;
}
</style>